WebXR plokštumų aptikimas: paviršių atpažinimo ir AR išdėstymo įvaldymas pasaulinei auditorijai

WebXR suteikia galingą galimybę kurti įtikinamas Papildytosios Realybės (AR) patirtis tiesiogiai interneto naršyklėse. Daugelio AR programų pagrindas yra plokštumų aptikimas, kuris leidžia jūsų programai suprasti realaus pasaulio aplinką ir sklandžiai integruoti virtualų turinį. Šiame tinklaraščio įraše pateikiamas išsamus WebXR plokštumų aptikimo vadovas, kuriame dėmesys skiriamas paviršių atpažinimui, AR išdėstymo technikoms ir geriausioms praktikoms, kaip sukurti įtraukiančias ir našias patirtis, kurios atlieptų pasaulinę auditoriją.

Kas yra WebXR plokštumų aptikimas?

Plokštumų aptikimas yra plokščių paviršių identifikavimo ir supratimo procesas vartotojo fizinėje aplinkoje, naudojant įrenginio jutiklius (dažniausiai kamerą ir judesio jutiklius). WebXR naudoja šiuos jutiklių duomenis kartu su kompiuterinės regos algoritmais, kad surastų ir sektų horizontalias ir vertikalias plokštumas, tokias kaip grindys, stalai, sienos ir net lubos.

Aptikus plokštumą, WebXR programa gali naudoti šią informaciją, kad:

• Pritvirtintų virtualius objektus prie realaus pasaulio, sukuriant įspūdį, jog jie iš tiesų yra aplinkoje.
• Suteiktų interaktyvias patirtis, kuriose vartotojai gali manipuliuoti virtualiais objektais atsižvelgiant į realaus pasaulio paviršius.
• Užtikrintų realistišką apšvietimą ir šešėlius, remiantis suvokiama aplinka.
• Įgyvendintų susidūrimų aptikimą tarp virtualių objektų ir realaus pasaulio paviršių.

Kodėl plokštumų aptikimas yra svarbus WebXR?

Plokštumų aptikimas yra itin svarbus kuriant įtikinamas ir patikimas AR patirtis. Be jo virtualūs objektai tiesiog sklandytų erdvėje, atskirti nuo vartotojo aplinkos, taip sugriaudami papildytosios realybės iliuziją.

Tiksliai aptikdamas ir suprasdamas paviršius, plokštumų aptikimas leidžia jums kurti AR programas, kurios yra:

• Įtraukiančios: Virtualūs objektai atrodo tarsi būtų tikra realaus pasaulio dalis.
• Interaktyvios: Vartotojai gali sąveikauti su virtualiais objektais natūraliu ir intuityviu būdu.
• Naudingos: AR programos gali pasiūlyti praktiškus sprendimus realioms problemoms, pvz., vizualizuoti baldus kambaryje ar matuoti atstumus tarp objektų.
• Prieinamos: WebXR ir plokštumų aptikimas suteikia galimybę kurti AR patirtis, prieinamas įvairiuose įrenginiuose, nereikalaujant, kad vartotojai atsisiųstų specialią programėlę.

Kaip veikia WebXR plokštumų aptikimas

WebXR plokštumų aptikimas paprastai apima šiuos veiksmus:

1. Plokštumų sekimo užklausimas: WebXR programa užklausia prieigos prie įrenginio AR galimybių, įskaitant plokštumų sekimą.
2. XRFrame gavimas: Kiekviename kadre programa gauna `XRFrame` objektą, kuris teikia informaciją apie dabartinę AR sesijos būseną, įskaitant kameros padėtį ir aptiktas plokštumas.
3. TrackedPlanes užklausimas: `XRFrame` objekte yra `XRPlane` objektų sąrašas, kurių kiekvienas atspindi aptiktą plokštumą scenoje.
4. XRPlane duomenų analizė: Kiekvienas `XRPlane` objektas teikia informaciją apie plokštumos:

• Orientacija: Ar plokštuma yra horizontali, ar vertikali.
• Pozicija: Plokštumos pozicija 3D pasaulyje.
• Matmenys: Plokštumos plotis ir aukštis.
• Daugiakampis: Ribojantis daugiakampis, atspindintis aptiktos plokštumos formą.
• Paskutinio keitimo laikas: Laiko žyma, nurodanti, kada paskutinį kartą buvo atnaujintos plokštumos savybės.

WebXR plokštumų aptikimo API ir kodo pavyzdžiai

Pažvelkime į keletą kodo pavyzdžių, naudojant JavaScript ir populiarią WebXR biblioteką, tokią kaip Three.js:

WebXR sesijos inicijavimas ir plokštumų sekimo užklausimas

Pirmiausia turite paprašyti įtraukiančios AR sesijos ir nurodyti, kad norite sekti aptiktas plokštumas:

            
async function initXR() {
  if (navigator.xr) {
    const supported = await navigator.xr.isSessionSupported('immersive-ar');
    if (supported) {
      try {
        session = await navigator.xr.requestSession('immersive-ar', { 
          requiredFeatures: ['plane-detection'] 
        });
        // Setup WebGL renderer and other scene elements
      } catch (error) {
        console.error("Error initializing XR session:", error);
      }
    } else {
      console.log('immersive-ar not supported');
    }
  } else {
    console.log('WebXR not supported');
  }
}

            

              
                Copy
              
            
          

XRFrame ir TrackedPlanes tvarkymas

Animacijos cikle jums reikės pasiekti `XRFrame` ir iteruoti per aptiktas plokštumas:

            
function animate(time, frame) {
  if (frame) {
    const glLayer = session.renderState.baseLayer;
    renderer.render(scene, camera);

    const xrViewerPose = frame.getViewerPose(xrRefSpace);
    if (xrViewerPose) {
      // Update camera position/rotation based on xrViewerPose

      const planes = session.getWorldInformation().detectedPlanes;
      if (planes) {
        for (const plane of planes) {
          // Access plane data and update the corresponding mesh in your scene
          updatePlaneMesh(plane);
        }
      }
    }
  }
  session.requestAnimationFrame(animate);
}

            

              
                Copy
              
            
          

Tinklo (Mesh) kūrimas kiekvienai aptiktai plokštumai

Norėdami vizualizuoti aptiktas plokštumas, galite sukurti paprastą tinklą (pvz., `THREE.Mesh`) ir atnaujinti jo geometriją pagal `XRPlane` matmenis ir daugiakampį. Jums gali prireikti pagalbinės funkcijos, kuri konvertuotų daugiakampio viršūnes į tinkamą geometrijos formatą jūsų atvaizdavimo varikliui.

            
function updatePlaneMesh(plane) {
  if (!planeMeshes.has(plane.id)) {
    // Create a new mesh if it doesn't exist
    const geometry = new THREE.PlaneGeometry(plane.width, plane.height);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.userData.plane = plane;

    scene.add(mesh);
    planeMeshes.set(plane.id, mesh);
  } else {
    // Update the existing mesh's geometry based on plane extents.
    const mesh = planeMeshes.get(plane.id);
    const planeGeometry = mesh.geometry;
    planeGeometry.width = plane.width;
    planeGeometry.height = plane.height;
    planeGeometry.needsUpdate = true;

    //Position and orientation of the plane.
    const pose = frame.getPose(plane.planeSpace, xrRefSpace);
    mesh.position.set(pose.transform.position.x,pose.transform.position.y,pose.transform.position.z);
    mesh.quaternion.set(pose.transform.orientation.x,pose.transform.orientation.y,pose.transform.orientation.z,pose.transform.orientation.w);
  }


}

            

              
                Copy
              
            
          

AR išdėstymo technikos: virtualių objektų pririšimas

Aptikę plokštumas, galite prie jų pririšti virtualius objektus. Tai apima virtualių objektų išdėstymą teisingoje pozicijoje ir orientacijoje atsižvelgiant į aptiktą plokštumą. Yra keletas būdų, kaip tai pasiekti:

Spindulių sekimas (Raycasting)

Spindulių sekimas apima spindulio „išmetimą“ iš vartotojo įrenginio (dažniausiai iš ekrano centro) į sceną. Jei spindulys susikerta su aptikta plokštuma, galite naudoti susikirtimo tašką virtualiam objektui pozicionuoti. Tai leidžia vartotojui paliesti ekraną, kad padėtų objektą ant norimo paviršiaus.

            
function placeObject(x, y) {
  const raycaster = new THREE.Raycaster();
  const mouse = new THREE.Vector2();

  mouse.x = (x / renderer.domElement.clientWidth) * 2 - 1;
  mouse.y = -(y / renderer.domElement.clientHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);

  const intersects = raycaster.intersectObjects(scene.children, true); //Recursively search for intersections.

  if (intersects.length > 0) {
    // Place the object at the intersection point
    const intersection = intersects[0];
    const newObject = createVirtualObject();
    newObject.position.copy(intersection.point);

    //Adjust orientation of the object as required
    newObject.quaternion.copy(camera.quaternion);
    scene.add(newObject);
  }
}

            

              
                Copy
              
            
          

Naudojant Hit-Test API (jei prieinama)

WebXR Hit-Test API suteikia tiesiogesnį būdą rasti susikirtimus tarp spindulio ir realaus pasaulio. Ji leidžia jums „išmesti“ spindulį iš vartotojo vaizdo ir gauti `XRHitResult` objektų sąrašą, kurių kiekvienas atspindi susikirtimą su realaus pasaulio paviršiumi. Tai yra efektyviau ir tiksliau nei pasikliauti vien tik aptiktomis plokštumomis.

            
async function createHitTestSource() {
  hitTestSource = await session.requestHitTestSource({
    space: xrRefSpace
  });
}

function placeObjectAtHit() {
  if (hitTestSource) {
    const hitTestResults = frame.getHitTestResults(hitTestSource);
    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const pose = hit.getPose(xrRefSpace);

      // Create or update the virtual object
      const newObject = createVirtualObject();
      newObject.position.set(pose.transform.position.x,pose.transform.position.y,pose.transform.position.z);
      newObject.quaternion.set(pose.transform.orientation.x,pose.transform.orientation.y,pose.transform.orientation.z,pose.transform.orientation.w);
      scene.add(newObject);
    }
  }
}

            

              
                Copy
              
            
          

Pririšimas prie plokštumos ribų

Taip pat galite naudoti plokštumos ribas atspindintį daugiakampį, kad išdėstytumėte objektus išilgai aptiktos plokštumos kraštų arba jos viduje. Tai gali būti naudinga norint išdėstyti virtualius objektus tam tikroje konfigūracijoje atsižvelgiant į plokštumą.

WebXR plokštumų aptikimo optimizavimas pasauliniams įrenginiams

WebXR programos turi veikti sklandžiai įvairiuose įrenginiuose, nuo aukščiausios klasės išmaniųjų telefonų iki mažesnės galios mobiliųjų įrenginių. Jūsų plokštumų aptikimo įgyvendinimo optimizavimas yra labai svarbus siekiant užtikrinti gerą vartotojo patirtį skirtingose aparatinės įrangos konfigūracijose.

Našumo aspektai

• Apribokite plokštumų skaičių: Per daug plokštumų sekimas gali būti skaičiavimo požiūriu brangus. Apsvarstykite galimybę apriboti plokštumų, kurias jūsų programa aktyviai seka, skaičių arba teikite pirmenybę arčiausiai vartotojo esančioms plokštumoms.
• Optimizuokite plokštumos tinklo geometriją: Naudokite efektyvias geometrijos reprezentacijas plokštumų tinklams. Venkite per didelio detalumo ar nereikalingų viršūnių.
• Naudokite WebAssembly: Apsvarstykite galimybę naudoti WebAssembly (WASM) skaičiavimams intensyvioms užduotims, tokioms kaip plokštumų aptikimo algoritmai ar pasirinktinės kompiuterinės regos rutinos. WASM gali žymiai pagerinti našumą, palyginti su JavaScript.
• Sumažinkite atvaizdavimo apkrovą: Visos scenos, įskaitant virtualius objektus ir plokštumų tinklus, atvaizdavimo optimizavimas yra kritiškai svarbus. Naudokite tokias technikas kaip detalumo lygis (LOD), okliuzijos atrinkimas ir tekstūrų glaudinimas, kad sumažintumėte atvaizdavimo apkrovą.
• Profiliavimas ir optimizavimas: Reguliariai profiliuokite savo programą naudodami naršyklės kūrėjo įrankius, kad nustatytumėte našumo problemas. Optimizuokite savo kodą remdamiesi profiliavimo rezultatais.

Suderinamumas su įvairiomis platformomis

• Funkcijų aptikimas: Naudokite funkcijų aptikimą, kad patikrintumėte, ar įrenginys palaiko plokštumų aptikimą, prieš bandydami jį naudoti. Pateikite atsarginius mechanizmus arba alternatyvias patirtis įrenginiams, kurie nepalaiko plokštumų aptikimo.
• ARCore ir ARKit: WebXR įgyvendinimai paprastai remiasi pagrindinėmis AR sistemomis, tokiomis kaip ARCore (Android) ir ARKit (iOS). Būkite informuoti apie plokštumų aptikimo galimybių ir našumo skirtumus tarp šių sistemų.
• Įrenginiui būdingi optimizavimai: Apsvarstykite galimybę įgyvendinti įrenginiui būdingus optimizavimus, kad pasinaudotumėte unikaliomis skirtingų įrenginių galimybėmis.

Prieinamumo aspektai

Būtina, kad WebXR AR patirtys būtų prieinamos vartotojams su negalia. Kalbant apie plokštumų aptikimą, apsvarstykite šiuos dalykus:

• Vaizdinis grįžtamasis ryšys: Pateikite aiškų vaizdinį grįžtamąjį ryšį, kai aptinkama plokštuma, pavyzdžiui, paryškindami plokštumą ryškia spalva ar raštu. Tai gali padėti silpnaregiams suprasti aplinką.
• Garsinis grįžtamasis ryšys: Pateikite garsinį grįžtamąjį ryšį, nurodantį, kada aptinkama plokštuma, pavyzdžiui, garso efektu arba žodiniu plokštumos orientacijos ir dydžio aprašymu.
• Alternatyvūs įvesties metodai: Pateikite alternatyvius virtualių objektų išdėstymo metodus, pvz., balso komandas ar klaviatūros įvestį, be lietimo gestų.
• Reguliuojamas išdėstymas: Leiskite vartotojams reguliuoti virtualių objektų padėtį ir orientaciją, kad atitiktų jų individualius poreikius ir pageidavimus.

Geriausios praktikos kuriant globalias WebXR plokštumų aptikimo programas

Kuriant WebXR plokštumų aptikimo programas pasaulinei auditorijai, reikia atidžiai apsvarstyti kultūrinius skirtumus, kalbų palaikymą ir skirtingas įrenginių galimybes. Štai keletas geriausių praktikų:

• Lokalizacija: Lokalizuokite savo programos tekstinį ir garsinį turinį, kad palaikytumėte skirtingas kalbas. Naudokite tinkamus datos ir skaičių formatus skirtingiems regionams.
• Kultūrinis jautrumas: Būkite atidūs kultūriniams skirtumams, kaip vartotojai suvokia AR patirtis ir sąveikauja su jomis. Venkite naudoti kultūriškai jautrius simbolius ar vaizdus.
• Prieinamumas: Laikykitės prieinamumo gairių, kad užtikrintumėte, jog jūsų programa būtų naudojama žmonėms su negalia.
• Našumo optimizavimas: Optimizuokite savo programos našumą, kad ji sklandžiai veiktų įvairiuose įrenginiuose.
• Testavimas: Kruopščiai išbandykite savo programą skirtinguose įrenginiuose ir skirtingose aplinkose, kad nustatytumėte ir ištaisytumėte bet kokias problemas. Apsvarstykite galimybę į testavimo procesą įtraukti vartotojus iš skirtingų regionų ir kultūrinių aplinkų.
• Privatumas: Aiškiai informuokite vartotojus, kaip naudojami jų duomenys, ir užtikrinkite, kad laikotės atitinkamų privatumo taisyklių.
• Pateikite aiškias instrukcijas: Pateikite aiškias ir glaustas instrukcijas, kaip naudotis programa, atsižvelgiant į skirtingus techninio raštingumo lygius.

WebXR plokštumų aptikimo programų pavyzdžiai

WebXR plokštumų aptikimas gali būti naudojamas kuriant įvairias AR programas, įskaitant:

• Baldų vizualizacija: Leidžia vartotojams pamatyti, kaip baldai atrodytų jų namuose prieš perkant. IKEA Place yra gerai žinomas pavyzdys.
• Žaidimai: Sukuria įtraukiančias AR žaidimų patirtis, kuriose virtualūs personažai ir objektai sąveikauja su realiu pasauliu.
• Švietimas: Teikia interaktyvias edukacines patirtis, kuriose studentai gali tyrinėti 3D modelius ir simuliacijas savo aplinkoje. Pavyzdžiui, vizualizuoti saulės sistemą ant stalo.
• Pramoninės programos: Leidžia darbuotojams vizualizuoti instrukcijas, brėžinius ir kitą informaciją tiesiogiai jų matymo lauke, gerinant efektyvumą ir tikslumą.
• Mažmeninė prekyba: Leidžia klientams išbandyti virtualius drabužius ar aksesuarus prieš juos perkant. Sephora Virtual Artist yra geras pavyzdys.
• Matavimo įrankiai: Leidžia vartotojams matuoti atstumus ir plotus realiame pasaulyje naudojant savo mobiliuosius įrenginius.

WebXR plokštumų aptikimo ateitis

WebXR plokštumų aptikimas yra sparčiai besivystanti sritis. Kadangi įrenginiai tampa galingesni, o kompiuterinės regos algoritmai tobulėja, ateityje galime tikėtis dar tikslesnių ir patikimesnių plokštumų aptikimo galimybių. Keletas galimų ateities pokyčių apima:

• Pagerintas plokštumų aptikimo tikslumas: Tikslesnis ir patikimesnis plokštumų aptikimas net ir sudėtingose aplinkose.
• Semantinis supratimas: Gebėjimas suprasti semantinę aptiktų plokštumų prasmę, pavyzdžiui, atskirti skirtingų tipų paviršius (pvz., medį, metalą, stiklą).
• Scenos rekonstrukcija: Gebėjimas sukurti visos aplinkos, o ne tik plokščių paviršių, 3D modelį.
• Dirbtiniu intelektu pagrįstas plokštumų aptikimas: Dirbtinio intelekto ir mašininio mokymosi panaudojimas siekiant pagerinti plokštumų aptikimo našumą ir tikslumą.
• Integracija su debesijos paslaugomis: Integracija su debesijos paslaugomis, siekiant įgalinti bendradarbiavimo AR patirtis ir bendras virtualias erdves.

Išvada

WebXR plokštumų aptikimas yra galinga technologija, leidžianti kurti įtraukiančias ir interaktyvias AR patirtis tiesiogiai interneto naršyklėse. Įvaldę paviršių atpažinimo ir AR išdėstymo technikas, kūrėjai gali sukurti įtikinamas programas, kurios atliepia pasaulinę auditoriją. Atsižvelgdami į našumo optimizavimą, prieinamumą ir kultūrinį jautrumą, galite užtikrinti, kad jūsų WebXR programos būtų naudingos ir malonios žmonėms iš viso pasaulio.

WebXR technologijai toliau tobulėjant, plokštumų aptikimas vaidins vis svarbesnį vaidmenį formuojant papildytosios realybės ateitį. Toliau eksperimentuokite, išlikite smalsūs ir toliau plėskite tai, kas įmanoma su WebXR!